import React, { useEffect } from 'react';

import echarts from "echarts";

export type MapProps = {
    style?: React.CSSProperties
};

const DeviceCard: React.FC<MapProps> = (props) => {

    const { style } = props

    useEffect(() => {

        const myChart = echarts.init(document.getElementById('device'));

        var option;
    
        option = {
            xAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd',//左边线的颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ddd',//坐标值得具体的颜色
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['罗茨风机', '除盐水泵', '轴封风机', '凝结水泵', '循环风机', '废水输送泵', '真空泵', '凝结水泵', '循环风机', '废水输送泵', '真空泵'],
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd',//左边线的颜色
                    }
                },
            },
            grid: [
                {left: '20%', top: '0'},
            ],
            textStyle: {
                color: '#ddd'
            },
            series: [{
                itemStyle: {
                    color: '#3e80d6'
                },
                data: [20, 80, 150, 60, 70, 50, 50, 40, 70, 30, 15],
                type: 'bar',
                barWidth: 10,
            }]
        };
    
        option && myChart.setOption(option);

        window.addEventListener('resize', function () {
			myChart.resize();
		});

    }, []);

    return (
        <div id='device' style={style}></div>
    );

};

export default DeviceCard;

